@charset "utf-8";
@import "common/reset";
@import "iconfont";
$fontsize:64px;
//首页
html {
    font-size: $fontsize;
}

@function r($px) {
    @return $px/$fontsize*1rem;
}

.web {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    //头部开始
    header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: r(90px);
        background: #b20000;
        text-align: center;
        padding: r(25px) r(0px);
        i {
            color: #fff;
            &:first-child {
                font-size: r(40px);
                margin-left: r(23px);
                line-height: initial;
            }
            &:nth-of-type(2) {
                display: block;
                width: r(42px);
                height: r(42px);
                font-size: r(21px);
                line-height: r(42px);
                border: 1px solid #fff;
                margin-right: r(17px);
                border-radius: 50%;
                text-align: center;
            }
        }
        .logo {
            width: r(264px);
            height: r(39px);
            vertical-align: top;
        }
    }
    //头部结束
    //内容开始
    .content {
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        left: 0;
        width: 100%;
        //              height: 100%;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .lunbo_wrap {
            width: 100%;
            overflow: hidden;
            position: relative;
            .pic_box {
                width: 100%;
                height: 100%;
                white-space: nowrap;
                font-size: 0;
                li {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                    .pic_nav {
                        width: 100%;
                        height: r(104px);
                        background: rgba(0, 0, 0, .3);
                        font-size: 16px;
                        color: white;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        padding: r(20px) r(17px) r(15px) r(17px);
                        a {
                            font-size: r(27px);
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            cursor: pointer;
                            display: block;
                            color: #FFFFFF;
                        }
                        .icon_time {
                            display: flex;
                            justify-content: space-between;
                            p {
                                font-size: r(27px);
                                i {
                                    font-size: r(27px);
                                }
                                span {
                                     :first-child {
                                        margin-right: r(50px);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .pannel {
                position: absolute;
                width: 100%;
                bottom: 1%;
                text-align: center;
                li {
                    display: inline-block;
                    width: r(10px);
                    height: r(10px);
                    border-radius: 50%;
                    background: rgb(183, 183, 183);
                    margin-right: r(4px);
                }
                .active {
                    background: red;
                    border-color: red;
                }
            }
        }
        //新闻开始
        .news_wrap {
            width: 100%;
            height: r(350px);
            background: white;
            ul {
                width: 100%;
                height: 100%;
                li {
                    width: 100%;
                    display: inline-flex;
                    justify-content: space-around;
                    &:first-child {
                        border-bottom: 1px solid #C5C5C5;
                    }
                    .new_tit {
                        width: r(325px);
                        height: r(107px);
                        font-size: 0;
                        a {
                            font-size: 12px;
                            color: #000000;
                            display: -webkit-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        div {
                            display: inline-block;
                            font-size: 9px;
                            color: #c5c5c5;
                            line-height: r(58px);
                        }
                    }
                    .news_img {
                        display: inline-block;
                        img {
                            width: r(208px);
                            height: r(118px);
                        }
                    }
                }
            }
        }
        //新闻结束  
        //新闻二开始
        .news_wrap2 {
            width: 100%;
            .news_box2 {
                max-width: r(583px);
                height: 100%;
                margin: auto;
                ul {
                    width: 100%;
                    .page_tit {
                        a {
                            font-size: r(25px);
                            color: black;
                            text-align: left;
                        }
                    }
                    .news_img {
                        display: flex;
                        justify-content: space-between;
                        img {
                            width: r(186px);
                            height: r(123px);
                        }
                    }
                    .comment {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 0;
                        .person_number {
                            a{
                                display: inline-block;
                                font-size: r(18px);
                                div{
                                    vertical-align: middle;
                                    display: inline-block;
                                    img {
                                    width: r(27px);
                                    height: r(26px);
                                    border-radius: 50%;
                                }
                                }
                                
                                
                                span,i {

                                font-size: r(18px);
                                color: #C5C5C5;
                            }
                            }
                                
                                
                                
                            }
                            
//                         
                        .real_time {
                            display: inline-block;
                            span {
                                font-size: r(18px);
                                color: #C5C5C5;
                            }
                        }
                    }
                }
            }
        }
        //新闻二结束
    }
    //内容结束
    //gime内容开始
    .Ggime_page {
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        display: none;
        
        .gime_carousel_wrap {
            position: relative;
            .lunbo_wrap {
                width: 100%;

                overflow: hidden;
                .pic_box {
                    width: 100%;
                    height: 100%;
                    white-space: nowrap;
                    font-size: 0;
                    li {
                        width: 100%;
                        height: 100%;
                        display: inline-block;
                        img {
                            width: 100%;
                            height: 100%;
                            display: block;
                        }
                    }
                }
                .pannel {
                    position: absolute;
                    bottom: 1%;
                    width: 100%;
                    text-align: center;
                    li {
                        width: r(10px);
                        height: r(10px);
                        border-radius: 50%;
                        background: rgb(183, 183, 183);
                        display: inline-block;
                    }
                    .active {
                        background: red;
                        border-color: red;
                    }
                }
            }
        }
        .newest_new {
            width: 100%;
            height: 100%;
            ul {
                margin-left: r(15px);
                li {
                    width: 100%;
                    font-size: 0;
                    border-bottom: 1px solid #848484;
                    display: flex;
                    justify-content: space-between;
                    padding: r(30px) r(20px) r(15px) 0;
                    &:first-child {
                        padding: 0;
                        position: relative;
                        p {
                            font-size: r(30px);
                            line-height: r(64px);
                            border-bottom: 3px;
                            color: red;
                            font-weight: 600;
                        }
                        div {
                            width: r(60px);
                            height: r(7px);
                            background: red;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                        }
                    }
                    .news_img {
                        width: r(186px);
                        height: r(120px);
                        margin-right: r(30px);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .new_content {
                        line-height: r(40px);
                        span {
                            color: #bbb7b7;
                            font-size: 12px;
                        }
                        a {
                            display: -webkit-box;
                            color: black;
                            font-size: 12px;
                            white-space: normal;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }
                }
            }
        }
    }
//  文章一开始
 .article_content {
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        left: 0;
        width: 100%;
        //              height: 100%;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        display: none;
        .lunbo_wrap {
            width: 100%;
            overflow: hidden;
            position: relative;
            .pic_box {
                width: 100%;
                height: 100%;
                white-space: nowrap;
                font-size: 0;
                li {
                    display: inline-block;
                    position: relative;
                    height: 100%;
                    width: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            .pannel {
                position: absolute;
                left: 0;
                bottom: 1%;
                width: 100%;
                text-align: center;
                li {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: rgb(183, 183, 183);
                    margin-right: r(4px);
                }
                .active {
                    background: red;
                    border-color: red;
                }
            }
        }
        //营销文
        .article_wrap {
            width: 100%;
            height: 100%;
            font-size: 0;
            ul {
                text-align: center;
                padding-top: r(20px);
                li {
                    display: inline-block;
                    width: r(282px);
                    height: r(323px);
                    background: #f6f6f6;
                    margin-bottom: r(20px);
                    margin-right: r(25px);
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    .article_sell {
                        width: r(282px);
                        height: r(182px);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    p {
                        font-size: r(24px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        text-align: left;
                    }
                    .sell_like {
                        display: flex;
                            justify-content: space-between;
                             align-items: center;
                        a,span,i{
                             font-size: r(20px);
                            line-height: r(30px);
                            color: #c5c5c5;
                        }
                       
                                            
                        a {
                           
                            padding: 0 r(24px);
                            background: #b20000;
                            border-radius: r(10px);
                            color: white;
                            
                        }

                    }
                    .username {
                         display: flex;
                            justify-content: space-between;
                             align-items: center;
                        a{
                            line-height: r(35px);
                            display: flex;
                            color: #dedede;
                             img {
                            width: r(35px);
                            height: r(35px);
                            background: #dedede;
                            display: inline-block;
                        }
                        }
                       
                        span {
                            color: #dedede;
                            font-size: r(20px);
                        }
                    }
                }
            }
        }
    }

//文章一家属
    
    //尾部开始
    footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: r(95px);
        background: #f5f5f5;
        border-top: 1px solid #bbb9ba;
        .footer_nav {
            width: 100%;
            text-align: center;
            font-size: 0;
            ul {
                padding: r(15px) 0 r(12px) 0;
                li {
                    display: inline-block;
                    width: 20%;
                    text-align: center;
                    div {
                        margin: auto;
                        width: r(46px);
                        height: r(38px);
                        background-size: r(38px);
                        background-repeat: no-repeat;
                    }
                    .home_page {
                        background-image: url(../img/01home_g.png);
                    }
                    .gime_page {
                        background-image: url(../img/03GIMC_g.png);
                    }
                    .article_page {
                        background-image: url(../img/05article_g.png);
                    }
                    .resource_page {
                        background-image: url(../img/07resou_g.png);
                    }
                    .school_page {
                        background-image: url(../img/09college_g.png);
                    }
                    a {
                        display: block;
                        font-size: r(18px);
                        color: #8b8b8b;
                        border-right: 1px solid #8B8B8B;
                        &:nth-of-type {
                            border-right: none;
                        } //不起效
                        &:hover {
                            color: red;
                            opacity: 1;
                            .home_page {
                                background-image: url(../img/02home_r.png);
                            }
                            .gime_page {
                                background-image: url(../img/04GIMC_r.png);
                            }
                            .article_page {
                                background-image: url(../img/06article_r.png);
                            }
                            .resource_page {
                                background-image: url(../img/08resou_r.png);
                            }
                            .school_page {
                                background-image: url(../img/10college_r.png);
                            }
                        }
                    }
                }
            }
        }
    }
}

//脚步结束
//  登录页开始
.login {
    //  display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #222;
    transform: translateX(-100%);
    transition: all 300ms ease-in;
    .hearder_box {
        width: 100%;
        line-height: r(100px);
        .search_wrap {
            background: #1f1f1f;
            border-bottom: 1px solid #524e4d;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .close_wrap {
                display: inline-block;
                line-height: r(100px);
                i {
                    font-size: r(60px);
                    color: red;
                    line-height: r(100px);
                }
            }
            form {
                display: inline-block;
                width: r(546px);
                line-height: r(100px);
                border: 1px solid #fff;
                border-radius: r(30px);
                .search_box {
                    line-height: r(54px);
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    i {
                        font-size: r(30px);
                        color: white;
                    }
                    input {
                        width: r(440px);
                        height: r(30px);
                        border: 0;
                        color: #848484;
                        background: #222222;
                        font-size: r(24px);
                    }
                }
            }
        }
    }
    //未登录内容部分
    .content_box {
        width: 100%;
        height: r(426px);
        //      background: #222222;
        font-size: 0;
        .user_box {
            text-align: center;
            padding: 50px;
          
            a {

                .user_img {
                    img {
                        width: r(145px);
                        height: r(145px);
                        border-radius: 50%;
                    }
                }
                p {
                    font-size: 14px;
                    color: white;
                    padding-top: 14px;
                }
            }
            span {
                font-size: 12px;
                color: #363435;
                text-decoration: underline;
            }
        }
        //未登录内容部分结束
        //已经登录的用户
        .yet_user {
            text-align: center;
            display: none;
            .user_img {
                img {
                    width: r(145px);
                    height: r(145px);
                    border-radius: 50%;
                }
            }
            .user_name {
                span {
                    font-size: r(28px);
                    color: white;
                }
                a {
                    width: r(103px);
                    height: r(50px);
                    font-size: r(24px);
                    line-height: r(25px);
                    color: white;
                    border: 1px solid #FFFFFF;
                    padding: 0 r(16px);
                }
            }
            .star {
                display: inline-flex;
            }
            li {
                padding-top: r(18px);
                &:nth-child(3) {
                    font-size: r(24px);
                    color: white;
                    .color_red {
                        color: red;
                    }
                }
                &:nth-child(4) {
                    display: flex;
                    justify-content: center;
                    a {
                        display: block;
                        font-size: r(26px);
                        width: r(246px);
                        line-height: r(60px);
                        background: red;
                        color: white;
                        text-align: center;
                        border-radius: 30px;
                        &:first-of-type {
                            margin-right: r(30px);
                        }
                    }
                }
            }
        }
        //  已经登录用户结束
    }
    //  内容部分结束
    //其他选择开始
    .other_selection {
        ul {
            background: #222222;
            padding: 0 r(30px);
            li {
                display: block;
                width: 100%;
                position: relative;
                border-bottom: 1px solid #2c2c2c;
                cursor: pointer;
                line-height: r(62px);
                p {
                    display: block;
                    font-size: r(28px);
                    color: #7d7d7d;
                    line-height: r(62px);
                    padding-top: r(28px);
                }
                span {
                    img {
                        display: block;
                        width: r(20px);
                        height: r(20px);
                        position: absolute;
                        top: 50%;
                        right: 0;
                    }
                }
            }
            .page_down {
                display: none;
                width: r(482px);
                text-align: center;
                margin: auto;
                a {
                    display: block;
                    font-size: r(28px);
                    line-height: r(90px);
                    color: white;
                    &:first-of-type {
                        border-bottom: 1px solid #464242;
                    }
                }
            }
        }
    }
    //登录页结束
   //注册页
      .register_box{
        width: 100%;
        height: 100%;
        background: rgba(30,30,30,.9);
        padding-top: r(192px);
        padding-bottom: r(384px);
        .register_wrap{
        width: r(493px);
        height: r(531px);
        
        margin: auto;
        .register_img{
            width: r(160px);
            height: r(135px);
            margin: auto;
            margin-bottom: r(46px);
            img{
                width: 100%;
                height: 100%;
            }
        }
        form{
            .form_wrap{
                width: 100%;
                height: 100%;
                li{
                    width: 100%;
                   height: r(53px);
                   font-size: 0;
                   margin-bottom:r(16px) ;
                   &:first-child{
                       position: relative;
                       i{
                           width: r(61px);
                        height: r(43px);
                        position: absolute;
                        left: 0;
                        top: 0;
                        text-align: center;
                        line-height: r(53px);
                        color: white;
                       }
                   }
                   &:nth-child(3){
                       position: relative;
                       i{
                           width: r(61px);
                        height: r(43px);
                        position: absolute;
                        left: 0;
                        top: 0;
                        text-align: center;
                        line-height: r(53px);
                        color: white;
                       }
                   }
                   &:nth-child(5){
                       margin-bottom: r(50px);
                        i,span{
                           font-size: r(18px);
                           color: white; 
                          line-height: r(53px);                   
                           
                          text-align: right;

                       } 
                           
                       }

                       
                             
                   
                   &:nth-child(6){
                       input[type="button"]{
                           color: white;
                           background: red;
                       }
                   }
                   &:nth-child(7){
                       input[type="button"]{
                           background: #393939;
                           border: 1px solid #b60005;
                           color: white;
                       }
                   }
                    input{
                    width: 100%;
                    height: 100%;
                    line-height: r(53px);
                     }
                    input[type="text"],input[type="password"]{
                    padding-left: r(61px);
                    background: #393939;
                    border: none;
                    font-size: 12px;

                    
                    }
                    
                    
                }
                
            }
        }

    }
    
    }

   //注册页结束 
    
    
}


//首页
//zhuce
.zhuce {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: none;
    .register_box{
        width: 100%;
        height: 100%;
        background: rgba(30,30,30,.9);
        padding-top: r(192px);
        padding-bottom: r(384px);
        .register_wrap{
        width: r(493px);
        height: r(531px);
        
        margin: auto;
        .register_img{
            width: r(160px);
            height: r(135px);
            margin: auto;
            margin-bottom: r(46px);
            img{
                width: 100%;
                height: 100%;
            }
        }
        form{
            .form_wrap{
                width: 100%;
                height: 100%;
                li{
                    width: 100%;
                   height: r(53px);
                   font-size: 0;
                   margin-bottom:r(16px) ;
                   &:first-child{
                       position: relative;
                       i{
                           width: r(61px);
                        height: r(43px);
                        position: absolute;
                        left: 0;
                        top: 0;
                        text-align: center;
                        line-height: r(53px);
                        color: white;
                       }
                   }
                   &:nth-child(3){
                       position: relative;
                       i{
                           width: r(61px);
                        height: r(43px);
                        position: absolute;
                        left: 0;
                        top: 0;
                        text-align: center;
                        line-height: r(53px);
                        color: white;
                       }
                   }
                   &:nth-child(5){
                       margin-bottom: r(50px);
                        i,span{
                           font-size: r(18px);
                           color: white; 
                          line-height: r(53px);                   
                           
                          text-align: right;

                       } 
                           
                       }

                       
                             
                   
                   &:nth-child(6){
                       input[type="button"]{
                           color: white;
                           background: red;
                       }
                   }
                   &:nth-child(7){
                       input[type="button"]{
                           background: #393939;
                           border: 1px solid #b60005;
                           color: white;
                       }
                   }
                    input{
                    width: 100%;
                    height: 100%;
                    line-height: r(53px);
                     }
                    input[type="text"],input[type="password"]{
                    padding-left: r(61px);
                    background: #393939;
                    border: none;
                    font-size: 12px;

                    
                    }
                    
                    
                }
                
            }
        }

    }
    
    }

    
    
}
